<template>
<section>
    <div class="top">
        <i class="el-icon-back" @click='back'></i>
        <span>留言反馈</span>
    </div>
    <div class="center">
        <div class="title">找回密码</div>
        <span v-model="info">{{info}}</span>
        <div class="phone" v-if="ischange">
            <div class="left" >
                <div class="country_code">+86</div>
                <div class="icon"><i class="el-icon-arrow-down"></i></div>
            </div>
            <div class="right">
                <input type="number" maxlength="11" placeholder="手机号" @input="ing(1)" v-model="val" value="val">
                <span v-if="isplay1" @click="deleteall(1)"><img src="../../assets/login/取消.png"></span>
            </div>
        </div>
        <div class="email" v-if="!ischange">
            <input type="email" placeholder="请输入绑定的邮箱" v-model="emails" value="emails" @input="ing(3)">
            <span v-if="isplay3" @click="deleteall(3)"><img src="../../assets/login/取消.png"></span>
        </div>
        <div class="agin">
            <input type="text" placeholder="验证码" @input="ing(2)" v-model="val1" value="val1" >
            <span v-if="isplay2" @click="deleteall(2)"><img src="../../assets/login/取消.png"></span>
            <span>发送验证码</span>
        </div>
        <div class="btn" @click="next" :class="{'bgc':isbgc}">下一步</div>
        <div class="finally" v-model="changeinfo" @click="change">{{changeinfo}}</div>
    </div>
</section>
</template>

<script type="text/javascript">
    export default {
        name:'forget',

        data(){
            return {
                info:"验证注册手机号，为你找回密码",
                changeinfo:'使用邮箱找回',
                isbgc:false,
                isplay1:false,
                isplay2:false,
                isplay3:false,
                ischange:true,
                val:'',
                val1:'',
                emails:'',
            }
        },
        methods:{
            change(){
                if(this.changeinfo=="使用邮箱找回"){
                    this.info = '验证注册邮箱，为你找回密码';
                    this.changeinfo = '使用手机号找回';
                }
                else{
                    this.info = '验证注册手机号，为你找回密码';
                    this.changeinfo = '使用邮箱找回';
                }
                this.ischange = !this.ischange;

            },
            next(){
                if(this.ischange==true){
                   if(this.isbgc == false){
                        alert("请输入正确的手机号码")
                    }
                    else{
                        alert('注册成功')
                    }
                }
                else{
                    if(this.isbgc == false){
                        alert("请输入正确的邮箱号")
                    }
                    else{
                        alert('注册成功')
                    }
                }


            },
            deleteall(n){
                if(n==1){
                    this.isplay1 = false;
                    this.val = "";
                }
                else if(n==2){
                    this.isplay2 = false;
                    this.val1 = "";
                }
                else{
                    this.isplay3 = false;
                    this.emails3 = "";
                }
                if(this.val=="" || this.val1==""){
                    this.isbgc = false;
                }
                else{
                    this.isbgc = true;
                }

            },
            back(){
                this.$router.push({
                    path:'/login'
                })
            },
            ing(n){
                if(n==1){
                    if(this.val == ""){
                        this.isplay1 = false
                    }else{
                        this.isplay1 = true;
                    }
                }
                else if(n==2){
                    if(this.val1 == ""){
                        this.isplay2 = false
                    }else{
                        this.isplay2 = true;
                    }
                }
                else{
                   if(this.emails == ""){
                        this.isplay3 = false
                    }else{
                        this.isplay3 = true;
                    }
                }
                if(this.val=="" || this.val1==""){
                    this.isbgc = false;
                }
                else{
                    this.isbgc = true;
                }

            }
        },
    }
</script>

<style type="text/css" lang="less" scoped>
section{
    .top{
        height: 20px;
        display: flex;
        justify-content: space-between;
        color:#11bf79;
        margin:1em 0;
        i{
            margin-left: 2em;
        }
        span{
            margin-right: 2em;
        }
    }
    .center{

        margin:0 2em;
        .title{
            font-size: 30px;
            font-weight: 800;
        }
        .email{
            height:20px;
            margin: 2em 2em 1em 0;
             input{
                border:none;
                outline:none;
            }
        }
        .phone{
            height:20px;
            input{
                border:none;
                outline:none;
            }
            display: flex;
            margin: 2em 2em 1em 0;
            // font-size: 20px;
            border-bottom: 1px solid #eee;
            .left{
                display: flex;
                height: 20px;
                .country_code{
                    font-weight: 800;
                }
            }
            .right{
                height: 20px;
                span{
                    display: inline-block;
                    height: 20px;
                }

            }

        }
        .btn{
            margin:2em 0;
            // padding: 1em 0;
            width: 90%;
            height: 4em;
            line-height: 4em;
            text-align: center;
            background: rgba(21,219,145,.3);
            color: #fff;
            border-radius: 50px;
            letter-spacing: 2px;
            font-size: .32rem;
            font-weight: 500;
        }
        .bgc{
            background-color: #15db91;
        }
        .agin{
            input{
                border:none;
                outline:none;
            }
            span:last-child{
                margin: 0 25px;
                height: 32px;
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
                text-align: center;
                border-radius: 4px;
                font-weight: 500;
                line-height: 32px;
                color: #999;
                background: #f2f2f2;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
        }
    }
}


</style>
